<template>
  <div>
    <el-form ref="zeroForm" :model="formData" :rules="rules" size="mini" label-width="86px"
             label-position="left">
      <el-row class="color">
        <el-form-item label="访视日期" prop="dataNow" style="width: 30%;border: none;border-bottom: 1px solid">
          <el-date-picker v-model="formData.dataNow" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                          :style="{width: '100%'}" clearable></el-date-picker>
        </el-form-item>
      </el-row>
      <el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名缩写:" prop="name">
              <el-input v-model="formData.name" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="住院号:" prop="admissionNumber">
              <el-input v-model="formData.admissionNumber" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身高(cm):" prop="height">
              <el-input v-model="formData.height" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体重(kg):" prop="weight">
              <el-input v-model="formData.weight" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="术前诊断" prop="preoperativeDiagnosis">
            <el-input v-model="formData.preoperativeDiagnosis" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="静息评分:" prop="restingScore">
              <el-input v-model="formData.restingScore" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="运动评分" prop="sportScore">
              <el-input v-model="formData.sportScore" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="心率(次/分):" prop="heartRate">
              <el-input v-model="formData.heartRate" placeholder="心率(次/分):" clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="收缩压" prop="systolicPressure">
              <el-input v-model="formData.systolicPressure" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="舒展压" prop="diastolicPressure">
              <el-input v-model="formData.diastolicPressure" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="呼吸(次/分)" prop="breath">
              <el-input v-model="formData.breath" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="体温" prop="bodyTemperature">
              <el-input v-model="formData.bodyTemperature" clearable :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-row>
      <el-row>
        <el-form-item label="择期行混合痔外剥内扎术或肛瘘手术患者，年龄≥18岁，性别不限； 美国麻醉医师协会分级（ASA ）Ⅰ-Ⅲ级" prop="standardOne">
          <el-radio-group v-model="formData.standardOne" size="small">
            <el-radio v-for="(item, index) in standardOneOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="BMI值在18-30kg/m2 之间。" prop="standardTwo">
          <el-radio-group v-model="formData.standardTwo" size="medium">
            <el-radio v-for="(item, index) in standardTwoOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="既往无镇痛药物和局麻药物过敏史。" prop="standardThree">
          <el-radio-group v-model="formData.standardThree" size="medium">
            <el-radio v-for="(item, index) in standardThreeOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="无其他严重合并疾病，术前评估能耐受手术治疗。" prop="standardFour">
          <el-radio-group v-model="formData.standardFour" size="medium">
            <el-radio v-for="(item, index) in standardFourOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="能够签署知情同意书，愿意接受相关治疗方案。" prop="standardFive">
          <el-radio-group v-model="formData.standardFive" size="medium">
            <el-radio v-for="(item, index) in standardFiveOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="有相关麻醉禁忌症。" prop="excludeOne">
          <el-radio-group v-model="formData.excludeOne" size="medium">
            <el-radio v-for="(item, index) in excludeOneOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="术后住院时间＜72h的患者。" prop="excludeTwo">
          <el-radio-group v-model="formData.excludeTwo" size="medium">
            <el-radio v-for="(item, index) in excludeTwoOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="近一年内曾行痔疮切除或肛瘘手术患者。" prop="excludeThree">
          <el-radio-group v-model="formData.excludeThree" size="medium">
            <el-radio v-for="(item, index) in excludeThreeOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="伴有严重的心、肝、肾疾病者。" prop="excludeFour">
          <el-radio-group v-model="formData.excludeFour" size="medium">
            <el-radio v-for="(item, index) in excludeFourOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="不能表达主观不适症状者。" prop="excludeFive">
          <el-radio-group v-model="formData.excludeFive" size="medium">
            <el-radio v-for="(item, index) in excludeFiveOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="接受其他有关治疗，该治疗可能对本研究结果有较大影响者。" prop="excludeSix">
          <el-radio-group v-model="formData.excludeSix" size="medium">
            <el-radio v-for="(item, index) in excludeSixOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="合并精神疾病或严重神经功能症患者。" prop="excludeSeven">
          <el-radio-group v-model="formData.excludeSeven" size="medium">
            <el-radio v-for="(item, index) in excludeSevenOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="妊娠或哺乳期妇女。" prop="excludeEight">
          <el-radio-group v-model="formData.excludeEight" size="medium">
            <el-radio v-for="(item, index) in excludeEightOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="对试验药物过敏者。" prop="excludeNine">
          <el-radio-group v-model="formData.excludeNine" size="medium">
            <el-radio v-for="(item, index) in excludeNineOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="有滥用药物、毒品或酗酒史者。" prop="excludeTen">
          <el-radio-group v-model="formData.excludeTen" size="medium">
            <el-radio v-for="(item, index) in excludeTenOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="研究者认为其不适合参与本项研究的患者。" prop="excludeEleven">
          <el-radio-group v-model="formData.excludeEleven" size="medium">
            <el-radio v-for="(item, index) in excludeElevenOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="是否入组?" prop="JoinGroup">
          <el-radio-group v-model="formData.JoinGroup" size="medium">
            <el-radio v-for="(item, index) in JoinGroupOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        dataNow: null,
        name: undefined,
        admissionNumber: undefined,
        height: undefined,
        weight: undefined,
        preoperativeDiagnosis: undefined,
        restingScore: undefined,
        sportScore: undefined,
        heartRate: undefined,
        systolicPressure: undefined,
        diastolicPressure: undefined,
        breath: undefined,
        bodyTemperature: undefined,
        standardOne: 2,
        standardTwo: 2,
        standardThree: 2,
        standardFour: 2,
        standardFive: 2,
        excludeOne: 2,
        excludeTwo: 2,
        excludeThree: 2,
        excludeFour: 2,
        excludeFive: 2,
        excludeSix: 2,
        excludeSeven: 2,
        excludeEight: 2,
        excludeNine: 2,
        excludeTen: 2,
        excludeEleven: 2,
        JoinGroup: 2,
      },
      rules: {
        dataNow: [{
          required: true,
          message: '',
          trigger: 'change'
        }],
        name: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        admissionNumber: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        height: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        weight: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        preoperativeDiagnosis: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        restingScore: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        sportScore: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        heartRate: [{
          required: true,
          message: '心率(次/分):',
          trigger: 'blur'
        }],
        systolicPressure: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        diastolicPressure: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        breath: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        bodyTemperature: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        standardOne: [{
          required: true,
          message: '择期行混合痔外剥内扎术或肛瘘手术患者，年龄≥18岁，性别不限； 美国麻醉医师协会分级（ASA ）Ⅰ-Ⅲ级不能为空',
          trigger: 'change'
        }],
        standardTwo: [{
          required: true,
          message: 'BMI值在18-30kg/m2 之间。不能为空',
          trigger: 'change'
        }],
        standardThree: [{
          required: true,
          message: '既往无镇痛药物和局麻药物过敏史。不能为空',
          trigger: 'change'
        }],
        standardFour: [{
          required: true,
          message: '无其他严重合并疾病，术前评估能耐受手术治疗。不能为空',
          trigger: 'change'
        }],
        standardFive: [{
          required: true,
          message: '能够签署知情同意书，愿意接受相关治疗方案。不能为空',
          trigger: 'change'
        }],
        excludeOne: [{
          required: true,
          message: '有相关麻醉禁忌症。不能为空',
          trigger: 'change'
        }],
        excludeTwo: [{
          required: true,
          message: '术后住院时间＜72h的患者。不能为空',
          trigger: 'change'
        }],
        excludeThree: [{
          required: true,
          message: '近一年内曾行痔疮切除或肛瘘手术患者。不能为空',
          trigger: 'change'
        }],
        excludeFour: [{
          required: true,
          message: '伴有严重的心、肝、肾疾病者。不能为空',
          trigger: 'change'
        }],
        excludeFive: [{
          required: true,
          message: '不能表达主观不适症状者。不能为空',
          trigger: 'change'
        }],
        excludeSix: [{
          required: true,
          message: '接受其他有关治疗，该治疗可能对本研究结果有较大影响者。不能为空',
          trigger: 'change'
        }],
        excludeSeven: [{
          required: true,
          message: '合并精神疾病或严重神经功能症患者。不能为空',
          trigger: 'change'
        }],
        excludeEight: [{
          required: true,
          message: '妊娠或哺乳期妇女。不能为空',
          trigger: 'change'
        }],
        excludeNine: [{
          required: true,
          message: '对试验药物过敏者。不能为空',
          trigger: 'change'
        }],
        excludeTen: [{
          required: true,
          message: '有滥用药物、毒品或酗酒史者。不能为空',
          trigger: 'change'
        }],
        excludeEleven: [{
          required: true,
          message: '研究者认为其不适合参与本项研究的患者。不能为空',
          trigger: 'change'
        }],
        JoinGroup: [{
          required: true,
          message: '是否入组?不能为空',
          trigger: 'change'
        }],
      },
      standardOneOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 0
      }],
      standardTwoOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 0
      }],
      standardThreeOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 0
      }],
      standardFourOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 0
      }],
      standardFiveOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 0
      }],
      excludeOneOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 0
      }],
      excludeTwoOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 0
      }],
      excludeThreeOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 0
      }],
      excludeFourOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 0
      }],
      excludeFiveOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 0
      }],
      excludeSixOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 0
      }],
      excludeSevenOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 0
      }],
      excludeEightOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 0
      }],
      excludeNineOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 0
      }],
      excludeTenOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 0
      }],
      excludeElevenOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 0
      }],
      JoinGroupOptions: [{
        "label": "是",
        "value": 1
      }, {
        "label": "否",
        "value": 0
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['zeroForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['zeroForm'].resetFields()
    },
  }
}

</script>
<style>
.color{
  background-color: #00afff;
}
</style>
